<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<style type="text/css">
			body,html{height: 100%;}
		#box{width: 640px;height: 100%;display: -webkit-box;-webkit-box-orient: vertical;}
		.header-top{width:100%;height:90px;position: relative;overflow: hidden;position: fixed;top: 0;}
		.car-shop{outline:none;border:none;position: absolute;right: 35px;top: 14px;height: 60px;width: 124px;background:#c80f0d;border-radius: 14px 14px;}
		.top-middle{background: #a90506;position: relative;}
		.car-shop i{font-size: 30px;color:#fff;font-style:normal ;}
		.top-middle h2{text-align: center;line-height: 90px;color: #FFFFFF;font-size: 26px;}
		
		.content{background: #f7f7f7;-webkit-box-flex: 1;margin-top:90px ;overflow: scroll;}
		.headimg{position:relative;border-radius:26px 26px;float: left;width: 166px;height: 166px;background: #1f1f1f;overflow: hidden;}
		.headimg i{font-size: 155px;color: #fff;text-align: center;padding-top: 10px;display: block;}
		.headTop{opacity:0;height: 166px;width: 166px;position:absolute;left:0;}
		.user-top{height: 318px;padding: 64px 36px;}
		.nameleft{font-size:34px;float: left;padding-left: 34px;line-height: 60px;padding-top: 20px;}
		.balance-money{color: #f02423;}
		.detail-list{height: 362px;border:1px solid #dadada;background: #FFFFFF;border-radius: 16px 16px;width: 554px;margin-left: 36px;}
		.detail-list ul li{padding-left:32px;font-size:34px;line-height:94px;height: 94px;border-top:1px solid #dadada;}
		.detail-list ul li:nth-of-type(1){border-top: 0;}
		.detail-list ul li a{color: black;}
		.detail-list ul li a i{float: right;padding-right: 20px;font-size: 30px;}
		.foot{position:fixed;bottom:0;width:100%;height:98px;background: #484850;display: -webkit-box;-webkit-box-orient: horizontal;}
		.common-page{padding-top:10px;-webkit-box-flex: 1;text-align: center;position:relative;}
		.foot i{font-size: 52px;}
		.foot a{color:#fff;}
		.foot span{display: block;}
		.active{height: 5px;width:100%;background: red;display: block;position: absolute;top: 0;left: 0;}
		.group-list ul{padding-left: 25px;}
		.group-list li{float: left;font-size: 30px;line-height: 90px;height: 90px;color: #fff;}
		.group-list li:nth-of-type(2){padding:0 20px;}

		</style>
	</head>
	<body>
		<div id="box">
			<header class="header-top">
				<div class="top-middle">
					 <h2>我的秀</h2>
					 <button class="car-shop"><i>充值</i></button>
				</div>
			</header>
			<section class="content">
			   <div class="user-top">
			   	   <div class="headimg">
			   	   	 
			   	   	  <input class="headTop" type="file" accept="image/*" capture="camera">
			   	   	   <i class="iconfont font">&#xe646;</i>
			   	   </div>
			   	   <div class="nameleft">
			   	   	  <div class="othername">
			   	   	  	  昵称：<span>未知</span>
			   	   	  </div>
			   	   	  <div class="balance">
			   	   	  	余额：<span class="balance-money">0</span>
			   	   	  </div>
			   	   </div>
			   </div>
			   <div class="detail-list">
			   	  <ul>
			   	  	<li><a href="#">我的订单<i class="iconfont">&#xe619;</i></a></li>
			   	  	<li><a href="#">我的优惠券<i class="iconfont">&#xe619;</i></a></li>
			   	  	<li><a href="#">浏览记录<i class="iconfont">&#xe619;</i></a></li>
			   	  	<li><a href="#">我的收藏<i class="iconfont">&#xe619;</i></a></li>
			   	  	
			   	  </ul>
			   </div>
			</section>
			<footer class="foot">
				<div class="home-page common-page">
					<strong class="active"></strong>
					<a href="#">
						<i class="iconfont">&#xe644;</i>
						<span>首页</span>
					</a>
				</div>
				<div class="classify common-page">
					<a href="#">
						<i class="iconfont">&#xe692;</i>
						<span>分类</span>
					</a>
				</div>
				<div class="shop-car common-page">
					<a href="#">
						<i class="iconfont">&#xe61b;</i>
						<span>购物车</span>
					</a>
				</div>
				<div class="home-show common-page">
					<a href="#">
						<i class="iconfont">&#xe646;</i>
						<span>我的秀</span>
					</a>
				</div>
				<div class="more common-page">
					<a href="#">
						<i class="iconfont">&#xe69a;</i>
						<span>更多</span>
					</a>
				</div>
			</footer>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript">
	
	$(function(){
		
	     $(".font").click(function(){
	     	
	     })
	   
	
		function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
			
			
			
			
	})
		
	</script>
</html>
